<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>主题切换</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <h2 class="main-title">主题切换</h2>
  <button class="theme-switch-btn">
    <svg class="icon" viewBox="0 0 1024 1024" width="24" height="24">
      <path
        d="M511.9 202.8h0.3c16.8 0 30.3-13.5 30.3-30.3V92.4C542.4 75.6 528.8 62 512 62s-30.4 13.6-30.4 30.4v80.1c0 16.8 13.5 30.3 30.3 30.3zM203.2 512c0-16.8-13.6-30.4-30.4-30.4H92.4C75.6 481.6 62 495.2 62 512s13.6 30.4 30.4 30.4h80.3c16.8 0 30.5-13.6 30.5-30.4zM931.6 481.6h-80.1c-16.8 0-30.4 13.6-30.4 30.4s13.6 30.4 30.4 30.4h80.1c16.8 0 30.4-13.6 30.4-30.4 0-16.8-13.6-30.4-30.4-30.4zM512.1 821.2h-0.3c-16.8 0-30.3 13.5-30.3 30.3v80.1c0 16.8 13.6 30.4 30.4 30.4 16.8 0 30.4-13.6 30.4-30.4v-80.1c0.1-16.8-13.4-30.3-30.2-30.3zM735.83 517.56c-11.88-7.07-26.86-5.94-37.51 2.64-24.79 19.9-54.76 30.37-86.53 30.37-76.44 0-138.74-62.24-138.74-138.81 0-31.59 10.37-61.3 29.78-86 8.58-10.75 9.52-25.74 2.36-37.63-7.07-11.88-20.74-18.11-34.31-15.56-55.05 9.9-105.38 38.95-141.76 81.95C292.36 397.99 272 453.44 272 510.4 272 643.65 380.39 752 513.48 752c57.12 0 112.64-20.46 156.28-57.52 43.07-36.59 72.11-87.32 81.72-142.68 2.45-13.58-3.87-27.16-15.65-34.24zM291.7 200.75c9.6 16.9 31.1 22.8 47.9 13.2 16.9-9.6 22.8-31.1 13.2-47.9-0.1-0.1-0.2-0.3-0.2-0.4l-17.6-30.5c-9.8-16.8-31.4-22.4-48.1-12.5-16.6 9.7-22.3 31-12.8 47.7l17.6 30.4zM809.6 373.35c6.2 0 12.3-1.7 17.7-4.8l60.7-35.5c16.9-9.6 22.7-31.1 13.1-48s-31.1-22.7-48-13.1c-0.2 0.1-0.4 0.2-0.6 0.4l-60.7 35.5c-16.8 9.8-22.4 31.3-12.7 48.1 6.4 10.8 17.9 17.5 30.5 17.4zM139.6 325.75l60 36.6c16.5 10.2 38.2 5.2 48.4-11.3 10.2-16.5 5.2-38.2-11.3-48.4-0.1-0.1-0.3-0.2-0.4-0.3l-60-36.7c-16.6-10.1-38.2-4.9-48.3 11.7s-5 38.3 11.6 48.4zM691.9 218.15c16.6 10.1 38.2 4.9 48.3-11.6l18.4-30c10.1-16.6 4.9-38.2-11.6-48.3s-38.2-4.9-48.3 11.6l-18.4 30c-10.2 16.5-5 38.1 11.6 48.3zM732.5 823.05c-9.3-17-30.7-23.2-47.7-13.9s-23.2 30.7-13.9 47.7c0.2 0.4 0.5 0.9 0.8 1.3l17.6 30.4c10.1 16.6 31.7 21.9 48.3 11.8 16.1-9.8 21.6-30.5 12.6-47l-17.7-30.3zM196.7 655.35l-60.7 35.4c-16.9 9.5-22.9 31-13.4 47.9s31 22.9 47.9 13.4c0.3-0.2 0.6-0.4 0.9-0.5l60.7-35.5c16.9-9.6 22.7-31.1 13.1-48s-31.1-22.7-48-13.1c-0.1 0.1-0.3 0.2-0.5 0.4zM884.4 698.15l-60-36.6c-16.5-10.2-38.2-5.2-48.4 11.3s-5.2 38.2 11.3 48.4c0.1 0.1 0.3 0.2 0.4 0.3l60 36.7c16.6 10.1 38.2 4.9 48.3-11.7s5-38.3-11.6-48.4zM331.5 805.45c-16.5-10.2-38.2-5-48.3 11.5l-18.5 30c-10.2 16.5-5 38.2 11.6 48.4s38.2 5 48.4-11.6l18.4-29.9c10.2-16.5 5-38.2-11.6-48.4 0.1 0 0.1 0 0 0z">
      </path>
      </path>
    </svg>
    切换主题
  </button>
  <div class="sun-moon-container">
    <!-- 太阳 -->
    <svg class="sun" viewBox="0 0 1024 1024" width="24" height="24">
      <path
        d="M227.98 512c0 157.51 127.69 285.2 285.2 285.2 157.55 0 285.2-127.66 285.2-285.2s-127.66-285.2-285.2-285.2c-157.51 0-285.2 127.69-285.2 285.2z m285.2-484.84l-80.2 160.44h160.44c0-0.01-80.24-160.44-80.24-160.44z m342.7 140.96l-170.17 56.7 113.4 113.43 56.77-170.13z m-515.23 56.7l-170.13-56.7 56.7 170.17 113.43-113.47zM187.59 430.58L27.16 510.82l160.44 80.2V430.58z m648.82 162.84l160.44-80.2-160.44-80.2v160.4zM513.18 996.84l80.2-160.44H432.94l80.24 160.44z m172.53-197.66l170.17 56.7-56.74-170.17-113.43 113.47z m-515.19 56.7l170.17-56.7-113.44-113.44-56.73 170.14z">
      </path>
    </svg>

    <!-- 月亮 -->
    <svg class="moon" viewBox="0 0 1024 1024" width="24" height="24">
      <path
        d="M533.997 64.536C617.645 125.651 672 224.47 672 336c0 185.568-150.432 336-336 336-111.53 0-210.349-54.355-271.464-138.003C76.006 771.202 271.952 960 512 960c247.424 0 448-200.576 448-448 0-240.048-188.798-435.994-426.003-447.464zM288 224c17.6 0 32-14.4 32-32s-14.4-32-32-32h-64V96c0-17.6-14.4-32-32-32s-32 14.4-32 32v64H96c-17.6 0-32 14.4-32 32s14.4 32 32 32h64v64c0 17.6 14.4 32 32 32s32-14.4 32-32v-64h64z">
      </path>
      <path
        d="M416 416h-32v-32c0-17.6-14.4-32-32-32s-32 14.4-32 32v32h-32c-17.6 0-32 14.4-32 32s14.4 32 32 32h32v32c0 17.6 14.4 32 32 32s32-14.4 32-32v-32h32c17.6 0 32-14.4 32-32s-14.4-32-32-32z">
      </path>
    </svg>
  </div>
</body>
<script src="./index.js"></script>

</html>